<extend name="Public:base"/>
<block name="body">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li {
            width: 30%;
            height: 150px;
            border: solid white 0;
            border-radius: 10px;
            float: left;
            margin: 1.5%;
        }

        ul > li > p {
            text-align: center;
            color: white;
            font-size: 6.5rem;
        }
    </style>
    <div style="margin-left: 20px;">
        <h1>你好呀，{$data.user}！</h1>
        <p>欢迎使用高顿网络营销部管理系统，祝您一天好心情！ ヾ(@^▽^@)ノ</p>
    </div>
    <div style="width: 100%;height: 150px;">
        <ul>
            <li style=" background: #6fa9fc;">
                <p>{$data.today}</p>
                <p style="font-size: 20px">今日扫码人数</p>
            </li>
            <li style=" background: #28d088;">
                <p>{$data.yesterday}</p>
                <p style="font-size: 20px">昨日扫码人数</p>
            </li>
            <li style=" background: #ffb267;">
                <p>{$data.total}</p>
                <p style="font-size: 20px">累计扫码人数</p>
            </li>
        </ul>
    </div>
    <div style="width: 95%;height: 600px;background: white;margin: 50px auto;border-radius:10px;overflow: hidden ">
        <div id="mainl_text" style="text-align: center;color: #737373;width: 100%;height: 100%;"></div>
    </div>
    <script>

        var myChart = echarts.init(document.getElementById('mainl_text'));
        option = {
            title: {
                text: '7日扫码统计',
            },
            xAxis: [{
                type: 'category',
                axisTick: {
                    alignWithLabel: true,
                },
                data: [],
            }],
            yAxis: [{
                type: 'value',
            }],
            series: [{
                type: 'line',
                label: {
                    normal: {
                        show: true,
                        position: 'left',
                    }
                },
                lineStyle: {
                    normal: {
                        width: 2,
                        shadowColor: 'rgba(0,0,0,0.4)',
                        shadowBlur: 10,
                        shadowOffsetY: 10,
                    }
                },
                data: [],
            }]
        };
        //开始使用
        $(function () {
            $.post(
                'index',
                function (res) {
                    for (i = 0; i < res.time.length; i++) {
                        option.xAxis[0]['data'].push(res.time[i])
                    }
                    for (i = 0; i < res.number.length; i++) {
                        option.series[0]['data'].push(res.number[i])
                    }
                    myChart.setOption(option);
                }
            )
        });

    </script>
</block>